定义

动态画面，简称动画(animation)：利用人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。

每秒帧数(FPS, Frames Per Second)：每秒画面重绘的次数。

FPS越大，则动画效果越平滑，
当FPS小于20时，一般就能明显感觉到卡滞。
人眼感觉到连续不间断的动画的FPS并不高，一般在30-60之间是可取的，否则就会消耗较多资源。

动画的制作方式

JavaScript计时器

1
2
3
4
setInterval(func, msec);
// func：每过msec毫秒执行的函数。

// 该函数会返回一个id，使用clearInterval(id)方法，可停止动画的重绘。

requestAnimationFrame

当不在意多久绘制一次时，适合使用该方法。

1
2
3
4
setInterval(func);
// 该函数会返回一个id，使用cancelAnimationFrame(id)方法，可停止动画的重绘

// 注意：requestAnmationFrame只请求一帧画面，所以在被调函数中应再次调用。

两种方法的不同点

setInterval可以手动设置FPS，而requestAnmationFrame在浏览器处理繁忙时会采取跳帧处理画面。

记录FPS

stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库。stat.js下载地址

很多情况下，我们希望知道实时的FPS信息，从而更好地监测动画效果。这时候，stat.js就能提供一个很好的帮助，它占据屏幕中的一小块位置（如左上角），效果为：

每秒的帧数(默认)
每秒的帧数(默认)

单击后显示每帧渲染时间：

每帧渲染时间
每帧渲染时间
1
2
3
4
5
6
7
8
9
10
11
var stat = null;
function init() {
    stat = new Stats();
    stat.domElement.style.position = 'absolute';
    stat.domElement.style.right = '0px';
    stat.domElement.style.top = '0px';
    document.body.appendChild(stat.domElement);
    // Three.js init ...
}

// 在动画绘制函数("动画制作方法"中的func)中调用stat.begin() 与 stat.end()，分别表示一帧的开始与结束。